<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<style>
  .box{
        width: 100%;
        height: 100%;
        border: solid 1px #ccc;
    }
</style>

<body>
  <div id="app">
    <div class="box" :style="{background:nowColor}">
    <h2>Vue.js的两个核心是什么？</h2>
    <p>数据驱动   组件系统</p>
    <h2>请问v-if和v-show有什么区别吗？分别使用于什么场景</h2>
    <p>v-if表示元素一开始并没有被渲染在界面上，然后随着true或者false的切换，元素是否被渲染到界面上的状态切换，来控制元素是否显示</p>
    <p>v-show表示元素一开始便被渲染到了界面上，只不是display：none或者display：black的切换，来控制元素的是否显示</p>
    <p>一般频换切换是否显示的状态，我们使用v-show，以避免资源的浪费<br>不频繁切换状态使用v-if</p>
    <h2>vue常用的修饰符</h2>
    <p>修饰符可以分为表单修饰符、事件修饰符、键值修饰符、v-bind修饰符</p>
    <li>表单修饰符：.lazy .number .trim</li>
    <li>事件修饰符：.stop .prevent .once等</li>
    <li>键值修饰符：.keycode</li>
    <h2>v-on可以监听多个事件嘛</h2>
    <p>有的可以 绑定事件监听，表达式可以是一个方法的名字或一个内联语句，
      如果没有修饰符可以省略，用在普通的HTML 元素上时，只能监听原生DOM事件。
    </p>
    <h2>vue中key的作用</h2>
    <p>key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。
      如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。
      而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。</p>
    <br>
    <h2>使用vue写出九九乘法表</h2>
    <div v-for="item in 9">
      <span v-for=" num in item">
        {{item}}*{{num}}={{item*num}}
      </span>
    </div>
    <btn-on @change-color="handle($event)" ></btn-on>
  </div>
  </div>


  <script>
    let btn={
        data:function(){
            return{
                color:['#f5f5dc','#34f3dc','#567af5'], 
            }
        },
        template:`
        <div>
            <button  v-for="item in color" @click="$emit('change-color',item)">{{item}}</button>
        </div>`
    }
    var vm=new Vue({
        el:'#app',
        data:{
            nowColor:'white'
        },
        components:{
            'btn-on':btn
        },
        methods:{
            handle:function(item){
                this.nowColor=item
            }
        }
    })
</script>

</body>

</html>